import axios from 'axios'
// 引入elementUi组件到http模块来，因为http模块和vue在此处没有关系
import { Message } from 'element-ui'
// token存储在vuex中
import store from '@/store'

// 单个实例
const instance = axios.create()

// 拦截器
// 请求
// get请求它就是没有请求体，但post/put/delete它们有请求体，为了统一，一般在工作中会把token以请求头的方式进行传递。
instance.interceptors.request.use(
  config => {
    config.timeout = 10000
    // 环境判断
    config.baseURL = process.env.NODE_ENV == 'development' ? '' : 'http://jx.1314000.cn:9000/'

    // token添加到请求头中
    // config.headers.authorization = 'token'
    config.headers.token = store.getters.token || ''

    return config
  },
  err => Promise.reject(err)
)

// 响应拦截器 -- 响应处理
instance.interceptors.response.use(
  res => {
    if (res.status == 200) {
      if (res.headers.token) {
        // 让响应头中的token续约到vuex中
        store.commit('user/setToken', res.headers.token)
      }
      return res.data
    }
    return {}
  },
  err => {
    // console.log(err.response.status)
    Message.error({
      duration: 1500,
      message: '网络异常请刷新，重新获取数据'
    })
    return Promise.reject(err)
  }
)

// 封装 get/post/put/delete请求动作方法
/**
 * get请求
 * @param {string} url 请求url地址
 * @param {object} config 请求头添加额外的头信息
 * @returns Promise
 */
export const get = (url, config = {}) => instance.get(url, config)

/**
 * post请求
 * @param {string} url 请求url地址
 * @param {object} data 请求体数据
 * @param {object} config 请求头额外信息
 * @returns Promise
 */
export const post = (url, data = {}, config = {}) => instance.post(url, data, config)

export const put = (url, data = {}, config = {}) => instance.put(url, data, config)
export const del = (url, data = {}, config = {}) => instance.delete(url, data, config)
